<script lang="ts" setup name="ranking">
import useUserStore from '@/store/modules/user';
import { getRanking } from '@/api/index';
import { useDateFormat } from '@vueuse/core';

const isClient = computed(() => {
  const { isClient } = useUserStore();
  return isClient;
});
const isAdmin = computed(() => {
  const { isAdmin } = useUserStore();
  return isAdmin;
});
const isFeign = computed(() => {
  const { isFeign } = useUserStore();
  return isFeign;
});

const queryParams = reactive({
  dateTime: [],
  startTime: '',
  ranking: 10,
  endTime: '',
  isFeign: true
});
const totalNumber = ref({
  data: [],
  showMore: false
});

const successRate = ref({
  data: [],
  showMore: false
});

const successNumber = ref({
  data: [],
  showMore: false
});

const successMoney = ref({
  data: [],
  showMore: false
});

const transformRate = ref({
  data: [],
  showMore: false
});

const viewAll = computed(() => {
  return totalNumber.value.showMore && successRate.value.showMore && successNumber.value.showMore && successMoney.value.showMore;
});

const loading = ref(true);
const getRankingData = async () => {
  // 时间筛选条件
  if (queryParams.dateTime && queryParams.dateTime.length) {
    if (useDateFormat(queryParams.dateTime[0], 'YYYY-MM-DD HH:mm:ss').value == useDateFormat(queryParams.dateTime[1], 'YYYY-MM-DD HH:mm:ss').value) {
      ElMessage.error('日期范围不能相同');
      queryParams.dateTime = [];
      return false;
    }
    queryParams.startTime = useDateFormat(queryParams.dateTime[0], 'YYYY-MM-DD HH:mm:ss').value;
    queryParams.endTime = useDateFormat(queryParams.dateTime[1], 'YYYY-MM-DD HH:mm:ss').value;
  } else {
    queryParams.startTime = '';
    queryParams.endTime = '';
  }
  if (!isFeign.value) {
    queryParams.isFeign = false;
  }
  loading.value = true;
  let res = await getRanking(queryParams);
  if (res.code == 200) {
    totalNumber.value.data = res.data.orderCount;
    successRate.value.data = res.data.successRate;
    transformRate.value.data = res.data.transformRate;
    successNumber.value.data = res.data.successCount;
    successMoney.value.data = res.data.moneyCount;
  } else {
    ElMessage.error(res.msg);
  }
  loading.value = false;
};

const viewNum = ref(false);
const changeView = (val) => {
  if (val) {
    queryParams.ranking = 50;
  } else {
    queryParams.ranking = 10;
  }
  getRankingData();
};

getRankingData();
</script>

<template>
  <el-card shadow="never">
    <div class="h-[60px] flex justify-between mb-2">
      <div class="flex items-center">
        <div class="w-[48px] h-[48px] bg-[#b165e9] rounded-full flex items-center justify-center mr-[10px]">
          <svg
            t="1747027793702"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="38183"
            width="24"
            height="60"
          >
            <path
              d="M452.266667 443.733333c0 34.133333-17.066667 68.266667-38.4 89.6-34.133333 34.133333-64 76.8-81.066667 123.733334-21.333333 51.2-17.066667 110.933333 17.066667 157.866666 4.266667 4.266667 12.8 17.066667 12.8 17.066667h-213.333334c-21.333333 0-38.4-4.266667-55.466666-17.066667-42.666667-25.6-55.466667-76.8-38.4-115.2 21.333333-64 72.533333-110.933333 132.266666-140.8-38.4-34.133333-59.733333-89.6-46.933333-149.333333 12.8-59.733333 59.733333-110.933333 123.733333-123.733333 72.533333-12.8 136.533333 21.333333 170.666667 81.066666 8.533333 21.333333 17.066667 46.933333 17.066667 76.8z"
              fill="#fff"
              p-id="38184"
            ></path>
            <path
              d="M972.8 682.666667c-34.133333-85.333333-102.4-145.066667-183.466667-174.933334 46.933333-34.133333 76.8-89.6 76.8-149.333333C866.133333 251.733333 785.066667 170.666667 682.666667 170.666667s-183.466667 81.066667-183.466667 183.466666c0 59.733333 29.866667 115.2 76.8 149.333334-85.333333 29.866667-153.6 93.866667-187.733333 179.2-12.8 34.133333-8.533333 68.266667 8.533333 98.133333 21.333333 29.866667 55.466667 51.2 93.866667 51.2h379.733333c38.4 0 72.533333-17.066667 93.866667-51.2 17.066667-29.866667 21.333333-68.266667 8.533333-98.133333z"
              fill="#fff"
              p-id="38185"
            ></path>
          </svg>
        </div>
        <span>排行榜</span>
      </div>
      <img src="@/assets/images/rank.png" class="h-[100%]" alt="">
    </div>
    <el-form inline>
      <el-form-item label="日期范围">
        <el-date-picker
          v-model="queryParams.dateTime"
          type="datetimerange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          @change="getRankingData"
          @clear="getRankingData"
          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
        />
      </el-form-item>
      <el-form-item>
        <el-switch
          v-model="viewNum"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: var(--el-color-primary)"
          active-text="查询所有数据"
          inactive-text="查询前十数据"
          @change="changeView"
        ></el-switch>
      </el-form-item>
      <el-form-item>
        <el-switch
          v-if="isFeign"
          v-model="queryParams.isFeign"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: var(--el-color-primary)"
          active-text="商户查看"
          inactive-text="管理员查看"
          :active-value="false"
          :inactive-value="true"
          @change="getRankingData"
        ></el-switch>
      </el-form-item>

      <el-form-item>
        <el-tooltip class="item" effect="dark" content="重置" placement="top">
          <el-button circle icon="Refresh" @click="getRankingData" />
        </el-tooltip>
      </el-form-item>
    </el-form>
    <div class="grid grid-cols-1 xl:grid-cols-5 lg:grid-cols-2 gap-y-8 gap-x-[6px] items-start">
      <div class="rank_con">
        <div class="title">有效订单排行</div>
        <div class="list">
          <el-table v-loading="loading" :data="totalNumber.data">
            <el-table-column label="排名" width="70" align="center">
              <template #default="{ $index }">
                <div v-if="$index == 0" class="number">
                  <img src="@/assets/images/ranking_1.png" class="w-[30px]" alt="" />
                </div>
                <div v-else-if="$index == 1" class="number">
                  <img src="@/assets/images/ranking_2.png" class="w-[30px]" alt="" />
                </div>
                <div v-else-if="$index == 2" class="number">
                  <img src="@/assets/images/ranking_3.png" class="w-[30px]" alt="" />
                </div>
                <div v-else>
                  <span>{{ $index + 1 }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="商户名称" show-overflow-tooltip>
              <template #default="{ row }">
                <span v-if="isClient">{{ row.appId }}</span>

                <span v-else class="name hover:text-[--el-color-primary] cursor-pointer">
                  {{ row.agentName && isAdmin ? row.agentName + ' > ' : '' }} {{ row.clientName ? row.clientName + ' > ' : '' }}
                  {{ row.appId }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="count" align="center" label="订单数量" width="120" />
          </el-table>
          <div v-if="false" class="flex items-center justify-center mt-5 mb-3">
            <div
              class="view_more flex w-fit items-center gap-2 font-bold text-[#666] hover:text-[var(--el-color-primary)] cursor-pointer"
              @click="totalNumber.showMore = !totalNumber.showMore"
            >
              <svg-icon
                icon-class="commencement"
                style="font-weight: lighter; font-size: 14px"
                :style="{ transform: totalNumber.showMore ? 'rotate(180deg)' : 'none' }"
              />
              <span v-if="!totalNumber.showMore">查看更多</span>
              <span v-else>只看前十</span>
            </div>
          </div>
        </div>
      </div>

      <div class="rank_con">
        <div class="title">订单成功率排行</div>
        <div class="list">
          <el-table v-loading="loading" :data="successRate.data">
            <el-table-column label="排名" width="70" align="center">
              <template #default="{ $index }">
                <div v-if="$index == 0" class="number">
                  <img src="@/assets/images/ranking_1.png" class="w-[30px]" alt="" />
                </div>
                <div v-else-if="$index == 1" class="number">
                  <img src="@/assets/images/ranking_2.png" class="w-[30px]" alt="" />
                </div>
                <div v-else-if="$index == 2" class="number">
                  <img src="@/assets/images/ranking_3.png" class="w-[30px]" alt="" />
                </div>
                <div v-else>
                  <span>{{ $index + 1 }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="商户名称" show-overflow-tooltip>
              <template #default="{ row }">
                <span v-if="isClient">{{ row.appId }}</span>
                <span v-else class="name hover:text-[--el-color-primary] cursor-pointer">
                  {{ row.agentName && isAdmin ? row.agentName + ' > ' : '' }} {{ row.clientName ? row.clientName + ' > ' : '' }} {{ row.appId }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="count" align="center" label="成功率" width="80">
              <template #default="{ row }">
                <span>{{ row.count }}%</span>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="false" class="flex items-center justify-center mt-5 mb-3">
            <div
              class="view_more flex w-fit items-center gap-2 font-bold text-[#666] hover:text-[var(--el-color-primary)] cursor-pointer"
              @click="successRate.showMore = !successRate.showMore"
            >
              <svg-icon
                icon-class="commencement"
                style="font-weight: lighter; font-size: 14px"
                :style="{ transform: successRate.showMore ? 'rotate(180deg)' : 'none' }"
              />
              <span v-if="!successRate.showMore">查看更多</span>
              <span v-else>只看前十</span>
            </div>
          </div>
        </div>
      </div>

      <div class="rank_con">
        <div class="title">订单转化率排行</div>
        <div class="list">
          <el-table v-loading="loading" :data="transformRate.data">
            <el-table-column label="排名" width="70" align="center">
              <template #default="{ $index }">
                <div v-if="$index == 0" class="number">
                  <img src="@/assets/images/ranking_1.png" class="w-[30px]" alt="" />
                </div>
                <div v-else-if="$index == 1" class="number">
                  <img src="@/assets/images/ranking_2.png" class="w-[30px]" alt="" />
                </div>
                <div v-else-if="$index == 2" class="number">
                  <img src="@/assets/images/ranking_3.png" class="w-[30px]" alt="" />
                </div>
                <div v-else>
                  <span>{{ $index + 1 }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="商户名称" show-overflow-tooltip>
              <template #default="{ row }">
                <span v-if="isClient">{{ row.appId }}</span>
                <span v-else class="name hover:text-[--el-color-primary] cursor-pointer">
                  {{ row.agentName && isAdmin ? row.agentName + ' > ' : '' }} {{ row.clientName ? row.clientName + ' > ' : '' }} {{ row.appId }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="count" align="center" label="转化率" width="80">
              <template #default="{ row }">
                <span>{{ row.count }}%</span>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="false" class="flex items-center justify-center mt-5 mb-3">
            <div
              class="view_more flex w-fit items-center gap-2 font-bold text-[#666] hover:text-[var(--el-color-primary)] cursor-pointer"
              @click="transformRate.showMore = !transformRate.showMore"
            >
              <svg-icon
                icon-class="commencement"
                style="font-weight: lighter; font-size: 14px"
                :style="{ transform: transformRate.showMore ? 'rotate(180deg)' : 'none' }"
              />
              <span v-if="!transformRate.showMore">查看更多</span>
              <span v-else>只看前十</span>
            </div>
          </div>
        </div>
      </div>

      <div class="rank_con">
        <div class="title">成功订单排行</div>
        <div class="list">
          <el-table v-loading="loading" :data="successNumber.data">
            <el-table-column label="排名" width="70" align="center">
              <template #default="{ $index }">
                <div v-if="$index == 0" class="number">
                  <img src="@/assets/images/ranking_1.png" class="w-[30px]" alt="" />
                </div>
                <div v-else-if="$index == 1" class="number">
                  <img src="@/assets/images/ranking_2.png" class="w-[30px]" alt="" />
                </div>
                <div v-else-if="$index == 2" class="number">
                  <img src="@/assets/images/ranking_3.png" class="w-[30px]" alt="" />
                </div>
                <div v-else>
                  <span>{{ $index + 1 }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="商户名称" show-overflow-tooltip>
              <template #default="{ row }">
                <span v-if="isClient">{{ row.appId }}</span>

                <span v-else class="name hover:text-[--el-color-primary] cursor-pointer">
                  {{ row.agentName && isAdmin ? row.agentName + ' > ' : '' }} {{ row.clientName ? row.clientName + ' > ' : '' }}
                  {{ row.appId }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="count" align="center" label="订单数量" width="120" />
          </el-table>
          <div v-if="false" class="flex items-center justify-center mt-5 mb-3">
            <div
              class="view_more flex w-fit items-center gap-2 font-bold text-[#666] hover:text-[var(--el-color-primary)] cursor-pointer"
              @click="successNumber.showMore = !successNumber.showMore"
            >
              <svg-icon
                icon-class="commencement"
                style="font-weight: lighter; font-size: 14px"
                :style="{ transform: successNumber.showMore ? 'rotate(180deg)' : 'none' }"
              />
              <span v-if="!successNumber.showMore">查看更多</span>
              <span v-else>只看前十</span>
            </div>
          </div>
        </div>
      </div>

      <div class="rank_con">
        <div class="title">成功订单金额排行</div>
        <div class="list">
          <el-table v-loading="loading" :data="successMoney.data">
            <el-table-column label="排名" width="70" align="center">
              <template #default="{ $index }">
                <div v-if="$index == 0" class="number">
                  <img src="@/assets/images/ranking_1.png" class="w-[30px]" alt="" />
                </div>
                <div v-else-if="$index == 1" class="number">
                  <img src="@/assets/images/ranking_2.png" class="w-[30px]" alt="" />
                </div>
                <div v-else-if="$index == 2" class="number">
                  <img src="@/assets/images/ranking_3.png" class="w-[30px]" alt="" />
                </div>
                <div v-else>
                  <span>{{ $index + 1 }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="商户名称" show-overflow-tooltip>
              <template #default="{ row }">
                <span v-if="isClient">{{ row.appId }}</span>

                <span v-else class="name hover:text-[--el-color-primary] cursor-pointer">
                  {{ row.agentName && isAdmin ? row.agentName + ' > ' : '' }} {{ row.clientName ? row.clientName + ' > ' : '' }} {{ row.appId }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="count" align="center" label="订单金额" width="120" />
          </el-table>
          <div v-if="false" class="flex items-center justify-center mt-5 mb-3">
            <div
              class="view_more flex w-fit items-center gap-2 font-bold text-[#666] hover:text-[var(--el-color-primary)] cursor-pointer"
              @click="successMoney.showMore = !successMoney.showMore"
            >
              <svg-icon
                icon-class="commencement"
                style="font-weight: lighter; font-size: 14px"
                :style="{ transform: successMoney.showMore ? 'rotate(180deg)' : 'none' }"
              />
              <span v-if="!successMoney.showMore">查看更多</span>
              <span v-else>只看前十</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.grid {
  .rank_con {
    border: 1px solid #eee;
    padding: 10px 0;
    padding-bottom: 32px;
    position: relative;
    .view_more {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
    }
    .title {
      text-align: center;
      font-weight: bold;
      font-size: 18px;
      color: #666;
      margin-bottom: 10px;
    }
  }
}
</style>
